<script setup lang='ts'>
interface Props {
  si: number
  data: {
    ppic: string;
    pgid: string;
    pgn: string;
    c: number;
    cl: {
      ci: string;
      cn: string;
      c: number;
    }[];
  }
  isOpen?: boolean
}

defineOptions({ name: 'AppSportsOutrightRegion' })
const props = defineProps<Props>()

const isOutrightType = inject<ComputedRef<boolean>>('isOutrightType')!

const isLayerOpen = ref(props.isOpen)

function toggleLayer() {
  isLayerOpen.value = !isLayerOpen.value
}

onActivated(() => {
  isLayerOpen.value = props.isOpen
})
</script>

<template>
  <div>
    <!-- 地区名称 -->
    <div @click="toggleLayer"
      class="mt-[24px] cursor-pointer mb-[16px] text-[20px] font-semibold flex items-center leading-[32px] text-[var(--color-text-white-0)]">
      <BaseIcon name="spt-outright" class="text-[32px] mr-[8px]" style="--tg-base-icon-color:#814bf6;" />
      <span>{{ $t('spt_type_outright') }} {{ data.pgn }}</span>
      <BaseIcon name="uni-triangle" class="opacity-50 text-[16px] ml-[4px] duration-[0.3s]"
        :class="[isLayerOpen ? 'rotate-[-180deg]' : '']" style="--tg-base-icon-color:#fff;" />
    </div>
    <div v-show="isLayerOpen">
      <!-- 联赛 -->
      <AppSportsOutrightLeague v-for="league in data.cl" :is-region-open="isLayerOpen && isOutrightType"
        :key="league.ci" :si="si" :ci="league.ci" />
    </div>
  </div>
</template>

<style lang='scss' scoped></style>
